<template>
  <div>
    <a-select
      :allowClear="allowClear"
      :mode="multi==true?'multiple':'default'"
      :showSearch="false"
      style="width: 100%"
      placeholder="请选择团队"
      @deselect="deselect"
      v-model="ids"
      :open="open"
      :disabled="disabled || disabledIds"
      @change="selectChange"
      @dropdownVisibleChange="selectIds">
      <a-select-option v-for="item in selectedObj" :key="item.id">{{ item.aliasName }}</a-select-option>
    </a-select>
    <select-team-input-modal
      ref="inputModal"
      :query-type="queryType"
      :teamType="teamType"
      :urlList="this.url.urlList"
      :multi="multi"
      :proposerDeptId="proposerDeptId"
      :isApi="isApi"
      :finance="finance"
      @choseObj="choseObj"></select-team-input-modal>
  </div>
</template>

<script>
  import SelectTeamInputModal from './modules/SelectTeamInputModal'
  import { getAction } from '@/api/manage'

  export default {
    name: 'SelectPostInput',
    components: { SelectTeamInputModal },
    props: {
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
    
      isChooseModal: {
        type: Boolean,
        required: false,
        default: false
      },
      open: {
        type: Boolean,
        required: false,
        default: false
      },
      value: {
        type: String,
        required: false,
        default: ''
      },
      tdlx: {
        type: Number,
        required: false,
        default: null
      },
      finance: {
        type: Boolean,
        default: false
      },
      multi: {
        type: Boolean,
        default: false,
        required: false
      },
      // 是否支持清除，默认不支持
      allowClear: {
        type: Boolean,
        default: false
      },
      props: {
        type: Object,
        default: null
      },
      queryType: {
        type: String,
        required: false,
        default: 'children'
      },
      teamType: {
        type: [String, Number],
        required: false,
        default: '1'
      },
      isApi:{
        type: String,
        required: false,
        default:''
      },
      proposerDeptId:{
        type: String,
        required: false,
        default:''
      }
    },
    data() {
      return {
        ids: [],
        selectedObj: [],
        deleteIds: [],
        list: [],
        objs: '',
        url: {
          queryById: '/api/erp/omc/teammanager/erpOmcTeamManager/queryById',
          queryByIds: '/api/erp/omc/teammanager/erpOmcTeamManager/queryByIds',
          urlList: '/api/erp/omc/teammanager/erpOmcTeamManager/list2?auditStatus=2&tdlx=' + this.tdlx,
          // urlList: '/api/erp/files/employee/erpEmployeePostChangeRecord/queryPostInfoByFinance'
        },
        disabledIds: false
      }
    },
    mounted() {
      /* if (this.tdlx) {
        debugger
        this.url.urlList = "/omc/teammanager/erpOmcTeamManager/list2?auditStatus=2&tdlx=" + this.tdlx
      } */
      // debugger;
      this.initObj(this.value);
    },
    watch: {
      value(val) {
        this.initObj(val);
      },
      proposerDeptId(val) {
        console.log(val,'组件');
        
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    methods: {
      initObj(ids) {
        this.disabledIds = true
        this.deleteIds = [];
        this.selectedObj = [];
        if (ids && ids.length > 0) {
          this.ids = ids.split(',');
          let url = '';
          let param = {};
          if (this.ids.length == 1) {
            url = this.url.queryById;
            param = { id: ids };
          } else {
            url = this.url.queryByIds;
            param = { ids: ids };
          }
          getAction(url, param).then((res) => {
            if (res.success) {
              if (!Array.isArray(res.result)) {
                this.selectedObj.push(res.result);
              } else {
                for (let i = 0; i < res.result.length; i++) {
                  this.selectedObj.push(res.result[i]);
                }
              }
              this.$refs.inputModal.edit(res.result, this.ids);
              this.disabledIds = false
            }
          });
        } else {
          this.ids = [];
          this.$refs.inputModal.edit(null, null);
          this.disabledIds = false
        }
      },
      selectChange() {
        if (!this.ids || this.ids.length == 0) {
          this.selectedObj = []
          let choseObj = [];
          this.selectedObj.choseObj = choseObj;
          this.choseObj(this.selectedObj)
        }
      },
      resetObj() {
        this.userType = false;
        this.ids = [];
        this.selectedObj = [];
        this.deleteIds = [];
        this.open = false;
        this.$refs.inputModal.edit(null, null);
      },
      selectIds() {
        if (!this.disabled) {
          this.deleteId();
          this.$refs.inputModal.add(this.selectedObj, this.ids);
        }
      },
      deselect(value, option) {
        this.deleteIds.push(value);
        this.deleteId();
        this.choseObj(this.selectedObj);
      },
      deleteId() {
        let that = this;
        this.selectedObj = this.selectedObj.filter(function (e) {
          return that.deleteIds.indexOf(e.id) == -1;
        })
        this.deleteIds = [];
      },
      // 子modal回调
      choseObj: function (list) {
        var _this = this
        console.log('list33', list)
        // 当需要有选择判断时
        var arr = []
        for (var i = 0; i < list.length; i++) {
          arr.push(list[i].id);
        }
        if (this.isChooseModal) {
          if (arr.toString() == this.ids.toString()) {
            return false
          } else {
            this.$confirm({
              title: '更换生产团队?',
              content: '请确定是否需要更换生产团队，这可能会导致您的填写的数据清空或者被更换',
              onOk() {
                _this.showReplace(list, arr)
              },
              onCancel() {
                return false
              }
            });
          }
        } else {
          this.showReplace(list, arr)
        }
      },
      showReplace (list, arr) {
        this.selectedObj = list;
        this.ids = arr || [];
        this.objs = this.ids.join(',');
        this.$emit('change', this.objs);
        this.$emit('back', this.selectedObj);
      }
    }
  }
</script>
